import { Component } from 'react'
import { View, Text, Button, Image } from '@tarojs/components'
import './addcut.less'
import Common, { getEvent, getFoodCount, setFoodCount } from '../utils/common'
let myEvent = getEvent();
export default class AddCut extends Component {
    constructor(){
        super(...arguments)
        this.state={
          Num:0,
        }
    }
    componentDidMount(){
      this.setState({Num:getFoodCount(this.props.food)});
      myEvent.on("changeCata",()=>{
        //监听到分类改变，进行菜品数量刷新
        this.setState({Num:getFoodCount(this.props.food)});
      });
    }
    addFood(){
      if(this.props.food){
        setFoodCount(this.props.food,this.state.Num,"add",()=>{
          this.setState({Num:getFoodCount(this.props.food)});
          myEvent.emit("add");
        });
      }
    }
    cutFood(){
      if(this.props.food){
        if(this.state.Num>0){
          setFoodCount(this.props.food,this.state.Num,"cut",()=>{
            this.setState({Num:getFoodCount(this.props.food)});
            myEvent.emit("cut");
          });
        }else{
          console.error("减菜异常");
        }
      }
    }
  render () {
    let {Num} = this.state;
    let hideClass=Num>0?"":"hide";
    return (
      <View className='op_item'>
        <Image onClick={this.cutFood.bind(this)} className={'op_img '+hideClass} src={require("../../images/cut.png")}></Image>
        <Text className={'food_num '+hideClass}>{Num}</Text>
        <Image onClick={this.addFood.bind(this)} className='op_img' src={require("../../images/add.png")}></Image>
      </View>
    )
  }
}
